<template>
  <a-layout class="monitor-layout">
    <a-layout-header>
      <div class="header-logo">
        <span class="iconfont iconjiankongzhongxin logo"></span> <span class="title">硬件监控平台系统</span>
      </div>

    </a-layout-header>
    <a-layout>
      <a-layout-sider width="200" style="background: #fff">
        <a-menu mode="inline" theme="dark" :default-selected-keys="['1']" :default-open-keys="['sub1']"
          :style="{ height: '100%', borderRight: 0 }">
          <a-sub-menu key="sub1">
            <span slot="title">
              <a-icon type="user" />数据监控
            </span>
            <a-menu-item key="1">
              <router-link to="/deviceData">硬件监控</router-link>
            </a-menu-item>
            <a-menu-item key="3">
              <router-link to="/faultList">设备故障</router-link>
            </a-menu-item>
            <a-menu-item key="2">
              <router-link to="/deviceCheck">设备检测</router-link>
            </a-menu-item>
          </a-sub-menu>

          <a-sub-menu key="sub2">
            <span slot="title">
              <a-icon type="laptop" />系统设置
            </span>
            <a-menu-item key="5">
              <router-link to="/deviceManager">设备管理</router-link>
            </a-menu-item>

            <a-menu-item key="6">
              监控设置
            </a-menu-item>
          </a-sub-menu>
          <a-sub-menu key="sub3">
            <span slot="title">
              <a-icon type="notification" />监控配置
            </span>
            <a-menu-item key="9">
              监控项
            </a-menu-item>
            <a-menu-item key="7">
              <router-link to="/deviceManager">应用集</router-link>
            </a-menu-item>
            <a-menu-item key="10">
              监控模板
            </a-menu-item>
            <a-menu-item key="11">
              触发报警
            </a-menu-item>
          </a-sub-menu>
        </a-menu>
      </a-layout-sider>
      <a-layout style="padding: 0 24px 24px">
        <a-layout-content :style="{ background: '#F0F2F5', padding: '24px', margin: 0, minHeight: '280px' }">
          <router-view></router-view>
        </a-layout-content>
      </a-layout>
    </a-layout>
  </a-layout>
</template>
<script>
export default {
  data () {
    return {
      collapsed: false,
    };
  },
  methods: {

  }
};
</script>

<style lang="less" scoped>
/deep/ .ant-layout {
  padding: 0 !important;
}
.monitor-layout {
  width: 100%;
  height: 100%;
  /deep/ .ant-layout-header {
    height: 60px;
    padding: 0 50px;
    line-height: 60px;
    background: #3e8ef7;
    display: flex;

    .header-logo {
      span {
        color: #ffffff;
        font-size: 20px;
      }
      .title {
        margin-left: 8px;
        font-size: 16px;
        font-family: MicrosoftYaHei, MicrosoftYaHei-Bold;
        font-weight: 500;
      }
    }
  }
}
</style>
